    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <title>我的每日任务清单</title>
      <style>
        /* 定义完成任务的样式 */
        .completed {
          color: gray;
          text-decoration: line-through;
        }
      </style>
    </head>
    <body>
      <div id="app">
        <h2>我的每日任务清单</h2>
        <ul>
          <!-- 使用 v-for 循环遍历任务 -->
          <li v-for="(task, index) in tasks" :key="index"
              :class="{ completed: task.completed }">
            {{ task.name }}
            <button @click="toggleTask(index)">
              {{ task.completed ? '已完成' : '未完成' }}
            </button>
          </li>
        </ul>
        <!-- 当所有任务都完成时，显示祝贺信息 -->
        <p v-if="allCompleted">恭喜你完成了所有任务！</p>
        
        <!-- 添加新任务的输入部分 -->
        <input v-model="newTask" placeholder="输入新的任务">
        <button @click="addTask">添加任务</button>
      </div>

      <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
      <script>
        new Vue({
          el: '#app',
          data: {
            // 初始化任务列表
            tasks: [
              { name: '上课', completed: false },
              { name: '做作业', completed: false },
              { name: '运动', completed: false },
              { name: '复习', completed: false }
            ],
            // 用于添加新任务的文本输入
            newTask: ''
          },
          computed: {
            // 计算是否所有任务都已完成
            allCompleted: function() {
              // 请在这里实现：如果 tasks 中的所有任务的 completed 都为 true，则返回 true，否则返回 false
            }
          },
          methods: {
            // 切换任务完成状态
            toggleTask: function(index) {
              // 请在这里实现：改变 tasks[index].completed 的值
            },
            // 添加新任务
            addTask: function() {
              // 请在这里实现：将 newTask 添加到 tasks 数组中，并将 newTask 重置为空字符串
            }
          }
        });
      </script>
    </body>
    </html>